/*
 * store权限产品列表
 * @Author: ljb
 * @Date: 2018-03-27 17:53:05
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-10-26 15:35:06
 */
<style lang="less" rel="stylesheet/less" type="text/less">
	.v-store-product-index{
		.code{
			overflow: hidden;
			white-space: nowrap;
			text-overflow:ellipsis;
			display: block;
		}
		.ivu-table-column-center{
			padding: 5px 0;
		}
		.ivu-table-body {
			overflow-x: auto;
		}
		.ivu-table-cell{
			padding-left: 10px;
			padding-right: 10px;
		}
		.info{
			text-align: left;
			white-space: nowrap;
			padding: 5px 0;
		}
		.info-thumb{
			width: 60px;
			height: 60px;
			cursor: pointer;
			display: table-cell;
			img{
				width: 100%;
			}
		}
		.info-title{
			height: 60px;
			display:  table-cell;
			white-space: normal;
			vertical-align: middle;
			padding-left: 8px;
		}
		.prices-item {
			white-space: nowrap;
			text-align: center;
		}
		.deleted, .hot, .new, .sale {
			cursor: pointer;
		}
	}
</style>
<template>
	<div class="v-store-product-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="products"
			:height="tableHeight()"
			class="personal-scrollbar"
			@on-sort-change="sortable"/>

	</div>
</template>

<script>
import { Tag, Icon, Button, Switch, Tooltip } from 'iview';
import showPictureMixin from 'src/views/mixins/showPictureMixin';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';
import { mapGetters } from 'vuex';

export default {
	name: 'ProductIndex',
	mixins: [showPictureMixin, computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		products: {
			type: Array,
			default() {
				return [];
			},
		},
		categories: {
			type: Array,
			default() {
				return [];
			},
		},
		sexes: {
			type: Array,
			default() {
				return [];
			},
		},
		positions: {
			type: Array,
			default() {
				return [];
			},
		},
		cosmeticMaterials: {
			type: Array,
			default() {
				return [];
			},
		},
		brandsList: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columnsList: [],
			columns: [], // 表格数据
		};
	},
	computed: {
		...mapGetters('userToken', ['getUserInfo']),
	},
	created() {
		switch (String(this.getUserInfo.has_youzan)) {
		case '1':
			this.columnsList = ['code', 'title', 'category', 'brand', 'tag', 'try_on', 'priority', 'price', 'product_type', 'is_youzan', 'created_at', 'deleted', 'operation'];
			break;
		default:
			this.columnsList = ['code', 'title', 'product_type', 'category', 'brand', 'tag', 'try_on', 'priority', 'price', 'created_at', 'deleted', 'operation'];
			break;
		}
		this.columns = this.getTableColumns();
	},
	methods: {

		/**
		 *手动拼接表格数据
		 *@return {undefined}
		 */
		getTableColumns() {
			const tableColumnsList = {
				code: {
					title: this.$t('product.code'),
					key: 'spu_code',
					align: 'center',
					width: 130,
					render: (h, { row }) => <div title={row.spu_code}> { row.spu_code || '-' } </div>,
				},
				title: {
					title: this.$t('product.title'),
					key: 'title',
					minWidth: 220,
					align: 'center',
					render: (h, { row }) => {
						const thumb_image = row.thumb_image ? <img onClick={() => this.showPicture(row.thumb_image.key, 400) } src={ row.thumb_image.key } alt="无" /> : '无';
						const title = row.title ? row.title : this.$t('common.none');
						return (
							<div class="info">
								<div class="info-thumb">{ thumb_image }</div>
								<div class="info-title">{ title }</div>
							</div>
						);
					},
				},
				price: {
					title: this.$t('product.price'),
					key: 'market_price',
					width: 140,
					align: 'center',
					render: (h, { row }) => (
						<div class="price">
							<div class="prices-item">
								{ this.$t('product.origin_price') }: { row.market_price || this.$t('common.none') }
							</div>
							<div class="prices-item">
								{ this.$t('product.promotional_price') }: { row.sell_price || this.$t('common.none') }
							</div>
						</div>
					),
				},
				category: {
					title: this.$t('product.category'),
					key: 'category_id',
					align: 'center',
					width: 120,
					render: (h, { row }) => {
						const [category] = this.categories.filter(item => item.id === row.category_id);
						return (
							<div class="category">
								<div class="info-item">
									{ category && category.name ? category.name : this.$t('common.none') }
								</div>
							</div>
						);
					},
				},
				brand: {
					title: this.$t('product.brand_series'),
					key: 'brand',
					width: 140,
					align: 'center',
					render: (h, { row }) => {
						const [brands] = this.brandsList.filter(item => item.id === row.brand_series_id);
						return (
							<div class="brand">
								<div class="info-item">
									{ row.brand ? row.brand.name : this.$t('common.none') }
								</div>
								{
									this.hasModelAssets(row.category_id) ? <div class="info-item">
										（{ this.$t('product.series') }: { brands ? brands.name : this.$t('common.none') }）
									</div> : ''
								}
							</div>
						);
					},
				},

				tag: {
					title: this.$t('product.tag'),
					key: 'product_tags',
					width: 120,
					align: 'center',
					render: (h, { row }) => {
						let tags = this.$t('common.none');
						if (Array.isArray(row.product_tags) && row.product_tags.length > 0) {
							tags = row.product_tags.map(tag => <Tag type="border">{ tag.name }</Tag>);
						}
						return (<div>{ tags }</div>);
					},
				},
				// image: {
				// 	title: this.$t('product.color_thumb'),
				// 	key: 'color_thumb_image',
				// 	align: 'center',
				// 	width: 160,
				// 	render: (h, { row }) => <div>
				// 		{
				// 			row.color_thumb_image && row.color_thumb_image.key
				// 				? <img src={ row.color_thumb_image.key } alt="" width="50%"/>
				// 				: this.$t('common.none')
				// 		}
				// 	</div>,
				// },
				try_on: {
					title: this.$t('product.try_on'),
					key: 'try_on',
					width: 100,
					align: 'center',
					sortable: 'custom',
					render: (h, { row }) => <div> { row.try_on || 0 } </div>,
				},
				priority: {
					title: this.$t('product.priority'),
					key: 'priority',
					align: 'center',
					width: 75,
					sortable: 'custom',
					render: (h, { row }) => {
						const priority = Object.prototype.toString.call(row.sort_priority) === '[object Number]' ?
							row.sort_priority : this.$t('common.none'); // 处理非 Number 类型 暂无

						return (<div> { priority } </div>);
					},
				},
				deleted: {
					title: this.$t('product.deleted'),
					key: 'is_sale',
					align: 'center',
					width: 60,
					render: (h, { row, index }) => {
						const is_store_product = !!row.store_id;
						const value = row.is_sale === 0 ? 1 : 0;
						const show_value = row.show_is_sale === 0 ? 1 : 0;
						const cannot_click = !row.category || !row.brand;

						if (is_store_product) {
							return (
								cannot_click ?
									<Tooltip content={this.$t('product.sale_tip')}>
										<Switch
											onOn-change={() => this.$emit('change-state', {
												type: 'is_sale', id: row.id, value, index,
											})}
											size="small"
											disabled={cannot_click}
											value={row.show_is_sale}
											true-value={1}
											false-value={0} >
										</Switch>
									</Tooltip>
									:
									<Switch
										onOn-change={() => this.$emit('change-state', {
											type: 'is_sale', id: row.id, value, index,
										})}
										size="small"
										value={row.show_is_sale}
										true-value={1}
										false-value={0} >
									</Switch>
							);
						}
						return (
							!row.category ?
								<Tooltip content={this.$t('product.sale_tip')}>
									<Switch
										onOn-change={() => this.$emit('update-customer-product-state', {
											is_sale: show_value,
											product_id: row.id,
										})}
										size="small"
										disabled={!row.category}
										value={row.show_is_sale}
										true-value={1}
										false-value={0} >
									</Switch>
								</Tooltip>
								:
								<Switch
									onOn-change={() => this.$emit('update-customer-product-state', {
										is_sale: show_value,
										product_id: row.id,
									})}
									size="small"
									value={row.show_is_sale}
									true-value={1}
									false-value={0} >
								</Switch>
						);
					},
				},
				product_type: {
					title: this.$t('product.product_type'),
					align: 'center',
					width: 70,
					render: (h, { row }) => {
						const type_name = row.store_id === 0 ? this.$t('product.customer') : this.$t('product.store');
						return (<div> { type_name } </div>);
					},
				},
				is_youzan: {
					title: this.$t('product.is_youzan'),
					key: 'youzan_item_id',
					align: 'center',
					width: 90,
					render: (h, { row }) => <div>
						{
							Number(row.youzan_item_id) === 0
								? <Icon type="close"></Icon>
								: <Icon type="checkmark"></Icon>
						}
					</div>,
				},
				created_at: {
					title: this.$t('common.created_at'),
					width: 120,
					key: 'created_at',
					align: 'center',
					render: (h, { row }) => {
						let date = <div>{ this.$t('common.none') }</div>;
						if (row.created_at) {
							const [day, time] = row.created_at.split(' ');
							date = (<div>
								<div>{day}</div>
								<div>{time}</div>
							</div>);
						}
						return date;
					},
					// render: (h, { row }) => <div> { row.created_at || this.$t('common.none') } </div>,
				},
				operation: {
					title: this.$t('common.operation'),
					align: 'center',
					width: 140,
					// fixed: 'right',
					render: (h, { row }) => {
						const is_store_product = !!row.store_id;
						return (
							is_store_product
								? (<div >
									<Button name="index__edit" size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row); }} type="primary">
										{ this.$t('common.edit') }
									</Button>
									<Button name="index__delete" size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('delete', row.id); }} type="error">
										{ this.$t('common.delete') }
									</Button>
								</div>)
								: (<div>
									<Button name="index__edit" size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit-customer-product', row); }} type="primary">
										{ this.$t('common.edit') }
									</Button>
								</div>)
						);
					},
				},
			};
			const data = [];

			this.columnsList.forEach(col => data.push(tableColumnsList[col]));

			return data;
		},

		/**
         * 排序的回调
         * @param  {Object} param {对应列的属性对象,里面包含了column列属性，key值，order排序字段}
         * @return {undefined}
         */
		sortable(param) {
			const search_param = {
				sort_column: param.order === 'normal' ? '' : param.key,

				sort_by: param.order === 'normal' ? '' : param.order.toLocaleUpperCase(),

				page: '',
			};

			this.$emit('sort', search_param);
		},

		/**
		 * 是否有模型素材
		 * @param {number} category_id {类型选中的值value}
		 * @return {boolean} has_assets
		 */
		hasModelAssets(category_id) {
			const [category] = this.categories.filter(item => item.id === category_id);
			return category && !!category.has_asset;
		},

	},
};
</script>
